<template>
  <view class="points-detail-container">
    <!-- 顶部积分统计 -->
    <view class="points-summary">
      <view class="total-points">
        <text class="label">当前积分</text>
        <text class="value">2,580</text>
      </view>
      <view class="points-statistics">
        <view class="stat-item income">
          <text class="stat-value">+1,280</text>
          <text class="stat-label">收入</text>
        </view>
        <view class="stat-item expense">
          <text class="stat-value">-500</text>
          <text class="stat-label">支出</text>
        </view>
      </view>
    </view>

    <!-- 明细列表 -->
    <scroll-view 
      class="detail-list" 
      scroll-y 
      @scrolltolower="loadMore"
      :refresher-enabled="true"
      :refresher-triggered="isRefreshing"
      @refresherrefresh="onRefresh"
    >
      <view class="list-content">
        <!-- 日期分组 -->
        <block v-for="(group, date) in groupedRecords" :key="date">
          <view class="date-header">{{ date }}</view>
          <view class="detail-item" v-for="item in group" :key="item.id">
            <view class="item-left">
              <text class="item-title">{{ item.title }}</text>
              <text class="item-time">{{ item.time }}</text>
            </view>
            <view :class="['item-points', item.type === 'income' ? 'income' : 'expense']">
              {{ item.type === 'income' ? '+' : '-' }}{{ item.points }}
            </view>
          </view>
        </block>
      </view>
      
      <!-- 加载更多提示 -->
      <view class="loading-more" v-if="hasMore">
        <text>加载中...</text>
      </view>
      <view class="no-more" v-else>
        <text>没有更多记录了</text>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      records: [],
      page: 1,
      pageSize: 20,
      hasMore: true,
      isRefreshing: false,
      isLoading: false
    }
  },
  computed: {
    groupedRecords() {
      // 按日期分组
      const groups = {}
      this.records.forEach(record => {
        const date = record.date
        if (!groups[date]) {
          groups[date] = []
        }
        groups[date].push(record)
      })
      return groups
    }
  },
  onLoad() {
    this.initRecords()
  },
  methods: {
    initRecords() {
      // 模拟积分记录数据
      const mockRecords = [
        {
          id: 1,
          title: '购买商品获得积分',
          points: 100,
          type: 'income',
          date: '2024-03-20',
          time: '15:30'
        },
        {
          id: 2,
          title: '兑换腋下脱毛体验券',
          points: 500,
          type: 'expense',
          date: '2024-03-20',
          time: '14:20'
        },
        {
          id: 3,
          title: '邀请好友奖励',
          points: 200,
          type: 'income',
          date: '2024-03-19',
          time: '18:45'
        },
        {
          id: 4,
          title: '评价获得积分',
          points: 50,
          type: 'income',
          date: '2024-03-19',
          time: '12:30'
        }
        // 可以继续添加更多记录
      ]
      
      this.records = mockRecords
      this.hasMore = false // 示例数据较少，设置为没有更多
    },
    
    async onRefresh() {
      this.isRefreshing = true
      try {
        await this.initRecords()
      } finally {
        this.isRefreshing = false
      }
    },
    
    loadMore() {
      if (!this.hasMore || this.isLoading) return
      // 实际项目中这里需要调用API加载更多数据
    }
  }
}
</script>

<style>
.points-detail-container {
  min-height: 100vh;
  background-color: #f8f8f8;
}

.points-summary {
  background: linear-gradient(135deg, #000000, #333333);
  padding: 40rpx 30rpx;
  color: #ffffff;
}

.total-points {
  text-align: center;
  margin-bottom: 30rpx;
}

.total-points .label {
  font-size: 28rpx;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 10rpx;
  display: block;
}

.total-points .value {
  font-size: 60rpx;
  font-weight: bold;
  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
}

.points-statistics {
  display: flex;
  justify-content: space-around;
  padding: 20rpx 0;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 16rpx;
}

.stat-item {
  text-align: center;
}

.stat-value {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 4rpx;
  display: block;
}

.stat-label {
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.8);
}

.income .stat-value {
  color: #52c41a;
}

.expense .stat-value {
  color: #ff4d4f;
}

.detail-list {
  height: calc(100vh - 300rpx);
}

.list-content {
  padding: 20rpx;
}

.date-header {
  padding: 20rpx 0;
  font-size: 24rpx;
  color: #999;
}

.detail-item {
  background-color: #ffffff;
  border-radius: 12rpx;
  padding: 24rpx;
  margin-bottom: 16rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.item-left {
  flex: 1;
}

.item-title {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 8rpx;
  display: block;
}

.item-time {
  font-size: 24rpx;
  color: #999;
}

.item-points {
  font-size: 32rpx;
  font-weight: bold;
}

.item-points.income {
  color: #52c41a;
}

.item-points.expense {
  color: #ff4d4f;
}

.loading-more,
.no-more {
  text-align: center;
  padding: 20rpx 0;
  color: #999;
  font-size: 24rpx;
}

.loading-more {
  display: flex;
  justify-content: center;
  align-items: center;
}

.loading-more::after {
  content: '';
  width: 30rpx;
  height: 30rpx;
  margin-left: 10rpx;
  border: 2rpx solid #999;
  border-top-color: transparent;
  border-radius: 50%;
  animation: loading 0.8s infinite linear;
}

@keyframes loading {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style> 